<!--suppress ALL -->
<template>
    <div class="commission-split-records">
        <div class="top-box">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="订单ID" prop="orderId">
                    <el-input v-model="form.orderId"></el-input>
                </el-form-item>
                <el-form-item label="分佣人" prop="userId">
                    <el-input v-model="form.userId"></el-input>
                </el-form-item>
                <el-form-item label="时间" prop="time">
                    <el-date-picker
                        value-format="yyyy-MM-dd"
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="orderId" label="订单ID" width="180"></el-table-column>
            <el-table-column prop="userId" label="购买用户" width="180"></el-table-column>
            <el-table-column prop="amount" label="交易金额" width="180">
                <template #default="scope">
                    <span>{{ scope.row.amount/100 }}元</span>
                </template>
            </el-table-column>
            <el-table-column prop="userId" label="分佣人" width="180"></el-table-column>
            <el-table-column prop="moneyLevelId" label="分佣等级" width="180"></el-table-column>
            <el-table-column prop="distributeMoney" label="分佣金额" width="180">
                <template #default="scope">
                    <span>{{ scope.row.distributionMoney/100 }}元</span>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            :current-page="current"
            :page-sizes="[10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
import {getCommissionList} from "@/api/distribute";

export default {
    name: "CommissionSplitRecords",
    data() {
        return {
            tableData: [
                {
                    orderId: "123456",
                    amount: 100,
                    userId: "张三",
                    moneyLevelId: "一级分销",
                    distributionMoney: 10
                },
            ],
            current: 1,
            size: 10,
            total: 100,
            loading: false,
            form:{
                orderId: null,
                userId: null,
                time: []
            }
        };
    },
    created() {
        this.search()
    },
    methods: {
        // 查询及初始化表格
        search() {
            this.loading = true
            getCommissionList({
                current: this.current,
                size: this.size,
                orderId: this.form.orderId||null,
                userId: this.form.userId||null,
                startTime: this.form.time[0]||null,
                endTime: this.form.time[1]||null,
            }).then(res => {
                this.tableData = res.records;
                this.total = res.total;
            }).finally(() => {
                this.loading = false;
            })
        },
        resetSearch(){
            this.$refs.form.resetFields(["time"]);
            this.search()
        },
        handleCurrentChange(val) {
            this.current = val;
            this.search();
            // 根据新的current重新获取数据
        }
    }
};
</script>

<style scoped lang="scss">
.commission-split-records {
    padding: 20px;
}
.top-box{
    margin-bottom: 20px;
    padding: 16px 0;
    background: white;
    border-radius: 4px;
}
</style>
